<template>
  <div class="card">
     <div  class="font-semibold text-xl mb-4">系统配置</div>
    <Accordion value="0">
      <AccordionPanel value="0">
        <AccordionHeader>任务失败通知</AccordionHeader>
        <AccordionContent>
          <div class="flex">
            <div class="items-center flex">
              <label class="font-semibold mr-2">邮箱通知</label>
              <ToggleSwitch v-model="configState.notice.email.on"/>
            </div>
            <div class="flex items-center ml-6">
              <label class="font-medium">邮箱：</label>
              <Inplace>
                <template #display>
                  {{ configState.notice.email.account || '点击设置' }}
                </template>
                <template #content="{ closeCallback }">
                <span class="inline-flex items-center gap-2">
                    <InputText v-model="configState.notice.email.account" autofocus/>
                    <Button icon="pi pi-times" text severity="danger" @click="closeCallback"/>
                </span>
                </template>
              </Inplace>
            </div>
          </div>
        </AccordionContent>
      </AccordionPanel>

      <AccordionPanel value="1">
        <AccordionHeader>Python依赖</AccordionHeader>
        <AccordionContent>
          <div class="">
            <div class="items-center flex">
              <label class="mr-2">Python解释器路径：</label>
              <label>{{ configState.interpreter.path }}</label>
            </div>
            <div class="flex mt-3">
              <label class="font-medium mr-3">依赖包</label>
              <Listbox v-model="selectPackage" :options="configState.interpreter.packages" optionLabel="name"
                       class="w-96" filter>
                <template #option="slotProps">
                  <div class="flex items-center">
                    <div class='mr-2'>{{ slotProps.option.name }}</div>
                    <div class="text-xs text-slate-500">{{ slotProps.option.version }}</div>
                  </div>
                </template>
              </Listbox>
              <div>
                <Button size="small" class='mr-3 ml-3' label="在线安装" @click="visiblePackageInstall = true"/>
                <!--<Button size="small" class='mr-3 ml-3' label="上传安装"/>-->
                <!--<Button size="small" severity="danger" label="卸载"/>-->
              </div>
            </div>
          </div>
        </AccordionContent>
      </AccordionPanel>

      <AccordionPanel value="2">
        <AccordionHeader>功能菜单</AccordionHeader>
        <AccordionContent>
          <Listbox :options="configState.menus" optionLabel="name" class="w-3/12">
            <template #option="slotProps">
              <div class="grid grid-cols-2 w-full">
                <div class='mr-2'>{{ slotProps.option.name }}</div>
                <ToggleSwitch v-model="slotProps.option.on"/>
              </div>
            </template>
          </Listbox>

        </AccordionContent>
      </AccordionPanel>

      <AccordionPanel value="3">
        <AccordionHeader>用户</AccordionHeader>
        <AccordionContent>
          <Listbox :options="configState.menus" optionLabel="name" class="w-3/12">
            <template #option="slotProps">
              <div class="grid grid-cols-2 w-full">
                <div class='mr-2'>{{ slotProps.option.name }}</div>
                <ToggleSwitch v-model="slotProps.option.on"/>
              </div>
            </template>
          </Listbox>

        </AccordionContent>
      </AccordionPanel>
    </Accordion>
    <Button class='mt-3' label="保存" @click="configSubmit"/>
  </div>

  <Dialog v-model:visible="visiblePackageInstall" modal header="在线安装软件包" :style="{ width: '25rem' }">
    <div class="flex items-center gap-4 mb-4">
      <label for="packageName" class="font-semibold w-24">包名称</label>
      <InputText id="packageName" class="flex-auto" autocomplete="off" v-model="packageName"/>
    </div>
    <div class="flex justify-end gap-2">
      <Button type="button" label="取消" severity="secondary" @click="visiblePackageInstall = false"></Button>
      <Button type="button" label="安装" @click="onlineInstallPakcage"></Button>
    </div>
  </Dialog>
</template>
<script setup>
import {reactive, ref} from 'vue';
import {ApiInstallPackageOnline, ApiGetConfig, ApiUpdateConfig} from "@/api/system.js";
import {useRequest} from 'ahooks-vue';


import Listbox from 'primevue/listbox';

import {useToast} from "primevue/usetoast";
import ToggleSwitch from 'primevue/toggleswitch';

import Accordion from 'primevue/accordion';
import AccordionPanel from 'primevue/accordionpanel';
import AccordionHeader from 'primevue/accordionheader';
import AccordionContent from 'primevue/accordioncontent';

const toast = useToast();

const checked = ref(false);
const notificationTypes = [
  {label: '邮件通知', value: 'email'},
  {label: '电话通知', value: 'phone'},
  {label: '短信通知', value: 'sms'},
];

const configState = reactive({
  notice: {
    email: {
      on: false,
      account: ''
    }
  },
  interpreter: {
    path: '',
    packages: []
  },
  menus: []
});
const selectPackage = ref('');
const packageName = ref('')
const visiblePackageInstall = ref(false);
const uploadLoading = ref(false)
const data = ref([])
const pythonFromState = reactive({
  python_interpreter: 'python3.9'
})


const {loading: configLoading, refresh} = useRequest(ApiGetConfig, {
  onSuccess: (e) => {
    configState.interpreter = e.data.config.interpreter
    configState.notice = e.data.config.notice
    configState.menus = e.data.config.menus
  }
})


function updateChange(info) {
  if (info.file.status === 'uploading') {
    uploadLoading.value = true
  } else if (info.file.status === 'done') {
    message.success("安装成功")
    uploadLoading.value = false
  }
}

const configSubmit = async () => {
  const result = await ApiUpdateConfig({config: {...configState}})
  if (result.code === 0) {
    toast.add({severity: 'success', summary: '成功', detail: result.msg, life: 3000});
  } else {
    toast.add({severity: 'danger', summary: '错误', detail: result.msg, life: 3000});
  }
}

const onlineInstallPakcage = async () => {
  const result = await ApiInstallPackageOnline({package_name: packageName.value})
  if (result.code === 0) {
    toast.add({severity: 'success', summary: '成功', detail: result.msg, life: 3000});
    await refresh()
  } else {
    toast.add({severity: 'danger', summary: '错误', detail: result.msg, life: 3000});
  }
}
</script>